<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>单机模式</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  <!--    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">-->
  <link rel="stylesheet" type="text/css" href="css/zzsc.css">
  <link rel="stylesheet" type="text/css" href="css/style2.css">

  <script src="js/jquery-3.5.1.js"></script>
  <script src="js/bootstrap.min.js"></script>

  <script type="text/javascript">

    //>>>>>>>>>>>>>>>>新增变量,轮到玩家
    let nowIsPlayer = true;

    let lastx = -123456789, lasty = -123456789;
    let computerPlayChessSign = true;
    //<<<<<<<<<<<<<<<<<

    // 棋手编号 0 ~ 3 (包含3)
    let piecesPlay = 0;
    //
    // 其他棋手的编号
    let otherFirstPlayer = 1;
    let otherSecondPlayer = 2;
    let otherThirdPlayer = 3;

    // 全局变量
    let piecesColor = ['r1', 'y1', 'b1', 'g1']; // 棋手所用棋子颜色标志
    let notPosition = ['r2', 'y2', 'b2', 'g2']; // 棋手在该区域不能下棋子标志
    let canPosition = ['r3', 'y3', 'b3', 'g3']; // 棋手可在该区域下棋子标志
    let color = ['red', 'yellow', 'blue', 'green'];
    let con; //棋子需要用到的数组
    let boxIndex; // 棋盘需要用到的数组
    // 以最中间的一个格子为中心，上下左右各含有几个棋子
    let leftNum;
    let rightNum;
    let upperNum;
    let lowerNum;
    let determine; // 标记哪些棋子被用了
    let choose = 0;// 聚焦的棋子
    let first = true; // 标记是否下的为第一步

    //电脑1,2,3
    //let

    // 屏幕的高和宽
    let scWidth = screen.width;
    let scHeight = screen.height;

    // 旋转、翻转需要用到的参数
    let angle1 = -1;
    let angle2 = 90;
    let angle3 = -1;

    // 棋盘参数
    let boxLength = 800;
    let gridLength = 40;

    //初始化电脑的棋子使用情况
    window.onload = function() {
      initComputerUsed();
    }

    $(function() {
      //websocket();
      // 初始化棋盘
      initChessBoard();
      // 初始化各玩家棋子参数
      initChessPlay();
      // 在候选区画出棋子
      drawChess();
      // 为每个在候选区的棋子添加点击事件，使其可以显示在展示区
      candChessClick();
      // 展示区内的棋子添加操作
      chessChangeOperating();

      //打印boxIndex
      printBoxIndex();

      // $("#bgmup").click(function () {
      //     var audio =$('#bgm') ;//jQuery对象
      //     var au=audio.get(0); //DOM对象
      //     au.pause();
      //     $("#bgmup").css("display","none");
      //     $("#bgmoff").css("display","inline-block");
      // });

      // $("#bgmoff").click(function () {
      //     var audio =$('#bgm') ;//jQuery对象
      //     var au=audio.get(0); //DOM对象
      //     au.play();
      //     $("#bgmoff").css("display","none");
      //     $("#bgmup").css("display","inline-block");
      // });

      $('#button5').click(function () {
        // var audio =$('#bm') ;//jQuery对象
        // var au=audio.get(0); //DOM对象
        // au.play();
        let r = confirm("是否确认跳过？");
        if(r == true){
          this.flag = !this.flag;
          //abandon++;
          // send();
        }

      });
      // let i = 0
      // $('#button6').click(function () {
      //     var audio =$('#bm') ;//jQuery对象
      //     var au=audio.get(0); //DOM对象
      //     au.play();
      //     if(i > 0){
      //         i--;
      //         drawChessBoard(replay[i]);
      //     }else {
      //         drawChessBoard(replay[i]);
      //     }
      // });
      // $('#button7').click(function () {
      //     var audio =$('#bm') ;//jQuery对象
      //     var au=audio.get(0); //DOM对象
      //     au.play();
      //     if(i < rnum){
      //         i++;
      //         drawChessBoard(replay[i]);
      //     }else {
      //         drawChessBoard(replay[i]);
      //     }
      // });

    })

    // 初始化棋盘
    function initChessBoard() {
      // 棋盘尺寸 20 * 20
      let boardSize = 20 * 20;
      let grid = '';
      for (let i = 0; i < boardSize; i++) {
        grid += '<div class="grid' + (i + 1) + '"></div>';
      }
      $('.chess-board').html(grid);
      boxIndex = new Array();
      for (let i = 0; i < 21; i++) {
        boxIndex[i] = new Array();
        for (let j = 0; j < 21; j++) {
          boxIndex[i][j] = 0;
        }
      }
      boxIndex[20][1] = 'r3';
      boxIndex[20][20] = 'y3';
      boxIndex[1][20] = 'b3';
      boxIndex[1][1] = 'g3';
    }

    //打印boxIndex二维数组
    function printBoxIndex() {
      console.log(boxIndex)
    }

    // 初始化各玩家棋子参数
    function initChessPlay() {
      con = new Array();
      leftNum = new Array();
      rightNum = new Array();
      upperNum = new Array();
      lowerNum = new Array();
      determine = new Array();
      for (let i = 0; i <= 21; i++) {
        con[i] = new Array();
        leftNum[i] = 0;
        rightNum[i] = 0;
        upperNum[i] = 0;
        lowerNum[i] = 0;
        determine[i] = false;
        for (let j = 0; j < 8; j++) {
          con[i][j] = new Array();
          for (let k = 0; k < 8; k++) {
            con[i][j][k] = 0;
          }
        }
      }

      for (let i = 1; i <= 21; i++) {
        switch (i) {
          case 1:
            con[i][4][4] = piecesColor[piecesPlay];
            con[i][3][4] = con[i][4][3] = con[i][4][5] = con[i][5][4] = notPosition[piecesPlay];
            con[i][3][3] = con[i][3][5] = con[i][5][3] = con[i][5][5] = canPosition[piecesPlay];
            leftNum[i] = 0;
            rightNum[i] = 0;
            upperNum[i] = 0;
            lowerNum[i] = 0;
            break;
          case 2:
            con[i][4][4] = con[i][4][5] = piecesColor[piecesPlay];
            con[i][3][4] = con[i][3][5] = con[i][4][3] = con[i][4][6] = con[i][5][4] = con[i][5][5] = notPosition[piecesPlay];
            con[i][3][3] = con[i][3][6] = con[i][5][3] = con[i][5][6] = canPosition[piecesPlay];
            leftNum[i] = 0;
            rightNum[i] = 1;
            upperNum[i] = 0;
            lowerNum[i] = 0;
            break;
          case 3:
            con[i][4][3] = con[i][4][4] = con[i][4][5] = piecesColor[piecesPlay];
            con[i][3][3] = con[i][3][4] = con[i][3][5] = con[i][4][2] = con[i][4][6] = con[i][5][3] = con[i][5][4] = con[i][5][5] = notPosition[piecesPlay];
            con[i][3][2] = con[i][3][6] = con[i][5][2] = con[i][5][6] = canPosition[piecesPlay];
            leftNum[i] = 1;
            rightNum[i] = 1;
            upperNum[i] = 0;
            lowerNum[i] = 0;
            break;
          case 4:
            con[i][3][4] = con[i][4][4] = con[i][4][5] = piecesColor[piecesPlay];
            con[i][2][4] = con[i][3][3] = con[i][3][5] = con[i][4][3] = con[i][4][6] = con[i][5][4] = con[i][5][5] = notPosition[piecesPlay];
            con[i][2][3] = con[i][2][5] = con[i][3][6] = con[i][5][3] = con[i][5][6] = canPosition[piecesPlay];
            leftNum[i] = 0;
            rightNum[i] = 1;
            upperNum[i] = 1;
            lowerNum[i] = 0;
            break;
          case 5:
            con[i][4][3] = con[i][4][4] = con[i][4][5] = con[i][4][6] = piecesColor[piecesPlay];
            con[i][3][3] = con[i][3][4] = con[i][3][5] = con[i][3][6] = con[i][4][2] = con[i][4][7] = con[i][5][3] = con[i][5][4] = con[i][5][5] = con[i][5][6] = notPosition[piecesPlay];
            con[i][3][2] = con[i][3][7] = con[i][5][2] = con[i][5][7] = canPosition[piecesPlay];
            leftNum[i] = 1;
            rightNum[i] = 2;
            upperNum[i] = 0;
            lowerNum[i] = 0;
            break;
          case 6:
            con[i][3][3] = con[i][4][3] = con[i][4][4] = con[i][4][5] = piecesColor[piecesPlay];
            con[i][2][3] = con[i][3][2] = con[i][3][4] = con[i][3][5] = con[i][4][2] = con[i][4][6] = con[i][5][3] = con[i][5][4] = con[i][5][5] = notPosition[piecesPlay];
            con[i][2][2] = con[i][2][4] = con[i][3][6] = con[i][5][2] = con[i][5][6] = canPosition[piecesPlay];
            leftNum[i] = 1;
            rightNum[i] = 1;
            upperNum[i] = 1;
            lowerNum[i] = 0;
            break;
          case 7:
            con[i][3][4] = con[i][4][3] = con[i][4][4] = con[i][4][5] = piecesColor[piecesPlay];
            con[i][2][4] = con[i][3][3] = con[i][3][5] = con[i][4][2] = con[i][4][6] = con[i][5][3] = con[i][5][4] = con[i][5][5] = notPosition[piecesPlay];
            con[i][2][3] = con[i][2][5] = con[i][3][2] = con[i][3][6] = con[i][5][2] = con[i][5][6] = canPosition[piecesPlay];
            leftNum[i] = 1;
            rightNum[i] = 1;
            upperNum[i] = 1;
            lowerNum[i] = 0;
            break;
          case 8:
            con[i][3][3] = con[i][3][4] = con[i][4][3] = con[i][4][4] = piecesColor[piecesPlay];
            con[i][2][3] = con[i][2][4] = con[i][3][2] = con[i][3][5] = con[i][4][2] = con[i][4][5] = con[i][5][3] = con[i][5][4] = notPosition[piecesPlay];
            con[i][2][2] = con[i][2][5] = con[i][5][2] = con[i][5][5] = canPosition[piecesPlay];
            leftNum[i] = 1;
            rightNum[i] = 0;
            upperNum[i] = 1;
            lowerNum[i] = 0;
            break;
          case 9:
            con[i][3][3] = con[i][3][4] = con[i][4][4] = con[i][4][5] = piecesColor[piecesPlay];
            con[i][2][3] = con[i][2][4] = con[i][3][2] = con[i][3][5] = con[i][4][3] = con[i][4][6] = con[i][5][4] = con[i][5][5] = notPosition[piecesPlay];
            con[i][2][2] = con[i][2][5] = con[i][3][6] = con[i][4][2] = con[i][5][3] = con[i][5][6] = canPosition[piecesPlay];
            leftNum[i] = 1;
            rightNum[i] = 1;
            upperNum[i] = 1;
            lowerNum[i] = 0;
            break;
          case 10:
            con[i][4][2] = con[i][4][3] = con[i][4][4] = con[i][4][5] = con[i][4][6] = piecesColor[piecesPlay];
            con[i][3][2] = con[i][3][3] = con[i][3][4] = con[i][3][5] = con[i][3][6] = con[i][4][1] = con[i][4][7] = con[i][5][2] = con[i][5][3] = con[i][5][4] = con[i][5][5] = con[i][5][6] = notPosition[piecesPlay];
            con[i][3][1] = con[i][3][7] = con[i][5][1] = con[i][5][7] = canPosition[piecesPlay];
            leftNum[i] = 2;
            rightNum[i] = 2;
            upperNum[i] = 0;
            lowerNum[i] = 0;
            break;
          case 11:
            con[i][3][3] = con[i][4][3] = con[i][4][4] = con[i][4][5] = con[i][4][6] = piecesColor[piecesPlay];
            con[i][2][3] = con[i][3][2] = con[i][3][4] = con[i][3][5] = con[i][3][6] = con[i][4][2] = con[i][4][7] = con[i][5][3] = con[i][5][4] = con[i][5][5] = con[i][5][6] = notPosition[piecesPlay];
            con[i][2][2] = con[i][2][4] = con[i][3][7] = con[i][5][2] = con[i][5][7] = canPosition[piecesPlay];
            leftNum[i] = 1;
            rightNum[i] = 2;
            upperNum[i] = 1;
            lowerNum[i] = 0;
            break;
          case 12:
            con[i][3][4] = con[i][4][3] = con[i][4][4] = con[i][4][5] = con[i][4][6] = piecesColor[piecesPlay];
            con[i][2][4] = con[i][3][3] = con[i][3][5] = con[i][3][6] = con[i][4][2] = con[i][4][7] = con[i][5][3] = con[i][5][4] = con[i][5][5] = con[i][5][6] = notPosition[piecesPlay];
            con[i][2][3] = con[i][2][5] = con[i][3][2] = con[i][3][7] = con[i][5][2] = con[i][5][7] = canPosition[piecesPlay];
            leftNum[i] = 1;
            rightNum[i] = 2;
            upperNum[i] = 1;
            lowerNum[i] = 0;
            break;
          case 13:
            con[i][3][4] = con[i][4][3] = con[i][4][4] = con[i][4][5] = con[i][5][4] = piecesColor[piecesPlay];
            con[i][2][4] = con[i][3][3] = con[i][3][5] = con[i][4][2] = con[i][4][6] = con[i][5][3] = con[i][5][5] = con[i][6][4] = notPosition[piecesPlay];
            con[i][2][3] = con[i][2][5] = con[i][3][2] = con[i][3][6] = con[i][5][2] = con[i][5][6] = con[i][6][3] = con[i][6][5] = canPosition[piecesPlay];
            leftNum[i] = 1;
            rightNum[i] = 1;
            upperNum[i] = 1;
            lowerNum[i] = 1;
            break;
          case 14:
            con[i][3][3] = con[i][3][4] = con[i][4][3] = con[i][4][4] = con[i][4][5] = piecesColor[piecesPlay];
            con[i][2][3] = con[i][2][4] = con[i][3][2] = con[i][3][5] = con[i][4][2] = con[i][4][6] = con[i][5][3] = con[i][5][4] = con[i][5][5] = notPosition[piecesPlay];
            con[i][2][2] = con[i][2][5] = con[i][3][6] = con[i][5][2] = con[i][5][6] = canPosition[piecesPlay];
            leftNum[i] = 1;
            rightNum[i] = 1;
            upperNum[i] = 1;
            lowerNum[i] = 0;
            break;
          case 15:
            con[i][3][3] = con[i][3][5] = con[i][4][3] = con[i][4][4] = con[i][4][5] = piecesColor[piecesPlay];
            con[i][2][3] = con[i][2][5] = con[i][3][2] = con[i][3][4] = con[i][3][6] = con[i][4][2] = con[i][4][6] = con[i][5][3] = con[i][5][4] = con[i][5][5] = notPosition[piecesPlay];
            con[i][2][2] = con[i][2][4] = con[i][2][6] = con[i][5][2] = con[i][5][6] = canPosition[piecesPlay];
            leftNum[i] = 1;
            rightNum[i] = 1
            upperNum[i] = 1;
            lowerNum[i] = 0;
            break;
          case 16:
            con[i][3][4] = con[i][4][4] = con[i][5][3] = con[i][5][4] = con[i][5][5] = piecesColor[piecesPlay];
            con[i][2][4] = con[i][3][3] = con[i][3][5] = con[i][4][3] = con[i][4][5] = con[i][5][2] = con[i][5][6] = con[i][6][3] = con[i][6][4] = con[i][6][5] = notPosition[piecesPlay];
            con[i][2][3] = con[i][2][5] = con[i][4][2] = con[i][4][6] = con[i][6][2] = con[i][6][6] = canPosition[piecesPlay];
            leftNum[i] = 1;
            rightNum[i] = 1;
            upperNum[i] = 1;
            lowerNum[i] = 1;
            break;
          case 17:
            con[i][3][3] = con[i][4][3] = con[i][4][4] = con[i][4][5] = con[i][5][4] = piecesColor[piecesPlay];
            con[i][2][3] = con[i][3][2] = con[i][3][4] = con[i][3][5] = con[i][4][2] = con[i][4][6] = con[i][5][3] = con[i][5][5] = con[i][6][4] = notPosition[piecesPlay];
            con[i][2][2] = con[i][2][4] = con[i][3][6] = con[i][5][2] = con[i][5][6] = con[i][6][3] = con[i][6][5] = canPosition[piecesPlay];
            leftNum[i] = 1;
            rightNum[i] = 1;
            upperNum[i] = 1;
            lowerNum[i] = 1;
            break;
          case 18:
            con[i][3][3] = con[i][4][3] = con[i][4][4] = con[i][4][5] = con[i][5][5] = piecesColor[piecesPlay];
            con[i][2][3] = con[i][3][2] = con[i][3][4] = con[i][3][5] = con[i][4][2] = con[i][4][6] = con[i][5][3] = con[i][5][4] = con[i][5][6] = con[i][6][5] = notPosition[piecesPlay];
            con[i][2][2] = con[i][2][4] = con[i][3][6] = con[i][5][2] = canPosition[piecesPlay];
            leftNum[i] = 1;
            rightNum[i] = 1;
            upperNum[i] = 1;
            lowerNum[i] = 1;
            break;
          case 19:
            con[i][3][3] = con[i][4][3] = con[i][4][4] = con[i][5][4] = con[i][5][5] = piecesColor[piecesPlay];
            con[i][2][3] = con[i][3][2] = con[i][3][4] = con[i][4][2] = con[i][4][5] = con[i][5][3] = con[i][5][6] = con[i][6][4] = con[i][6][5] = notPosition[piecesPlay];
            con[i][2][2] = con[i][2][4] = con[i][3][5] = con[i][4][6] = con[i][5][2] = con[i][6][3] = con[i][6][6] = canPosition[piecesPlay];
            leftNum[i] = 1;
            rightNum[i] = 1;
            upperNum[i] = 1;
            lowerNum[i] = 1;
            break;
          case 20:
            con[i][3][3] = con[i][3][4] = con[i][4][4] = con[i][4][5] = con[i][4][6] = piecesColor[piecesPlay];
            con[i][2][3] = con[i][2][4] = con[i][3][2] = con[i][3][5] = con[i][3][6] = con[i][4][3] = con[i][4][7] = con[i][5][4] = con[i][5][5] = con[i][5][6] = notPosition[piecesPlay];
            con[i][2][2] = con[i][2][5] = con[i][3][7] = con[i][4][2] = con[i][5][3] = con[i][5][7] = canPosition[piecesPlay];
            leftNum[i] = 1;
            rightNum[i] = 2;
            upperNum[i] = 1;
            lowerNum[i] = 0;
            break;
          case 21:
            con[i][2][4] = con[i][3][4] = con[i][4][4] = con[i][4][5] = con[i][4][6] = piecesColor[piecesPlay];
            con[i][1][4] = con[i][2][3] = con[i][2][5] = con[i][3][3] = con[i][3][5] = con[i][3][6] = con[i][4][3] = con[i][4][7] = con[i][5][4] = con[i][5][5] = con[i][5][6] = notPosition[piecesPlay];
            con[i][1][3] = con[i][1][5] = con[i][3][7] = con[i][5][3] = con[i][5][7] = canPosition[piecesPlay];
            leftNum[i] = 0;
            rightNum[i] = 2;
            upperNum[i] = 2;
            lowerNum[i] = 0;
            break;
        }
      }
    }

    // 画出棋子
    function drawChess() {
      for (let i = 1; i <= 21; ++i) {
        $('.chess-place').append('<div class="chess-container' + i + '"></div>');
        $('.chess-container' + i).css({
          'width': 100 + 'px',
          'height': 100 + 'px',
          'margin': 5 + 'px',
          'display': 'block'
        });
        for (let j = 2; j <= 6; ++j) {
          for (let k = 2; k <= 6; ++k) {
            if (con[i][j][k] !== piecesColor[piecesPlay]) {
              $('.chess-container' + i).append('<div style="visibility: hidden;"></div>');
            } else {
              $('.chess-container' + i).append('<div class="drag' + i + '"></div>');
              $('.drag' + i).css({
                'outline': '1px solid #ffffff',
                'cursor': 'pointer',
                'background-color': color[piecesPlay]
              });
            }
          }
        }
        $('.chess-container' + i + ' div').css({
          'width': 20 + 'px',
          'height': 20 + 'px'
        });
      }
    }

    // 为每个在候选区的棋子添加点击事件，使其可以显示在展示区
    function candChessClick() {
      for (let i = 1; i <= 21; ++i) {
        $('.drag' + i).click(function () {
          if (determine[choose] === false) {
            $('.exhi-content' + ' div').remove();
            $('.chess-place' + ' .chess-container' + choose).show();
          }
          $('.chess-container' + i).clone().appendTo('.exhi-content');
          $('.exhi-content').children().children('.drag' + i).addClass('move-chess');
          $('.exhi-content').children().css({
            'position': 'absolute',
            'width': 300 + 'px',
            'height': 300 + 'px',
            'margin': ''
          });
          $('.exhi-content').children().children().css({
            'width': 60 + 'px',
            'height': 60 + 'px'
          });
          $('.chess-place' + ' .chess-container' + i).hide();
          choose = i;
          move();
        });
      }
    }

    // 展示区内的棋子旋转和翻转操作
    function chessChangeOperating() {
      // 左右翻转
      $('#button1').off("click").click(function (event) {
        // //音效
        // var audio =$('#bm') ;//jQuery对象
        // var au=audio.get(0); //DOM对象
        // au.play();

        let temp = leftNum[choose];
        leftNum[choose] = rightNum[choose];
        rightNum[choose] = temp;
        $('.exhi-content').children().css({
          'transform': 'scaleX(' + angle1 + ')',
          '-webkit-transform': 'scaleX(' + angle1 + ')',
          'transition': 'transform .5s'
        });
        setTimeout(function () {
          let ck = new Array();
          for (let j = 0; j < 8; j++) {
            ck[j] = new Array();
            for (let k = 0; k < 8; k++) {
              ck[j][k] = 0;
            }
          }
          for (let j = 1; j <= 7; j++) {
            for (let k = 1; k <= 7; k++) {
              ck[j][8 - k] = con[choose][j][k];
            }
          }
          graphicsChanges(ck, choose);
        }, 500);
        event.preventDefault();
      });

      // 旋转
      $('#button2').off("click").click(function (event) {
        // //音效
        // var audio =$('#bm') ;//jQuery对象
        // var au=audio.get(0); //DOM对象
        // au.play();

        let temp = leftNum[choose];
        leftNum[choose] = lowerNum[choose];
        lowerNum[choose] = rightNum[choose];
        rightNum[choose] = upperNum[choose];
        upperNum[choose] = temp;
        $('.exhi-content').children().css({
          'transform': 'rotate(' + angle2 + 'deg)',
          '-webkit-transform': 'rotate(' + angle2 + 'deg)',
          'transition': 'transform .5s'
        });
        setTimeout(function () {
          let ck = new Array();
          for (let j = 0; j < 8; j++) {
            ck[j] = new Array();
            for (let k = 0; k < 8; k++) {
              ck[j][k] = 0;
            }
          }
          for (let j = 1; j <= 7; j++) {
            for (let k = 1; k <= 7; k++) {
              ck[k][8 - j] = con[choose][j][k];
            }
          }
          graphicsChanges(ck, choose);
        }, 500);
        event.preventDefault();
      });

      // 上下翻转
      $('#button3').off("click").click(function (event) {
        // //音效
        // var audio =$('#bm') ;//jQuery对象
        // var au=audio.get(0); //DOM对象
        // au.play();

        let temp = upperNum[choose];
        upperNum[choose] = lowerNum[choose];
        lowerNum[choose] = temp;
        $('.exhi-content').children().css({
          'transform': 'scaleY(' + angle3 + ')',
          '-webkit-transform': 'scaleY(' + angle3 + ')',
          'transition': 'transform .5s'
        });
        setTimeout(function () {
          let ck = new Array();
          for (let j = 0; j < 8; j++) {
            ck[j] = new Array();
            for (let k = 0; k < 8; k++) {
              ck[j][k] = 0;
            }
          }
          for (let j = 1; j <= 7; j++) {
            for (let k = 1; k <= 7; k++) {
              ck[8 - j][k] = con[choose][j][k];
            }
          }
          graphicsChanges(ck, choose);
        }, 500);
        event.preventDefault();
      });
    }

    function graphicsChanges(ck, i) {
      $('.exhi-content').children().remove();
      $('.exhi-content').append('<div class="chess-container' + i + '"></div>');
      $('.exhi-content').children().css({
        'position': 'absolute',
        'width': 300 + 'px',
        'height': 300 + 'px',
        'margin': ''
      });
      //在每个container容器中画出棋子
      for (let j = 2; j <= 6; j++) {
        for (let k = 2; k <= 6; k++) {
          if (ck[j][k] !== piecesColor[piecesPlay]) {
            $('.exhi-content').children().append('<div style="visibility: hidden;"></div>');
          } else {
            $('.exhi-content').children().append('<div class="drag' + i + ' move-chess"></div>');
            $('.drag' + i).css({
              'outline': '1px solid #ffffff',
              'cursor': 'pointer',
              'background-color': color[piecesPlay]
            });
          }
        }
      }
      $('.exhi-content').children().children().css({
        'width': 60 + 'px',
        'height': 60 + 'px'
      });
      for (let j = 1; j <= 7; j++) {
        for (let k = 1; k <= 7; k++) {
          con[i][j][k] = ck[j][k];
        }
      }
      move();
    }

    // 展示区鼠标按下、移动、松开事件
    function move() {
      let exhibitionLeft = $('.exhi-content').offset().left;
      let exhibitionTop = $('.exhi-content').offset().top;
      let originX = 100;
      let originY = 100;
      let centerX = 200;
      let centerY = 200;
      $('.move-chess').mousedown(function (event) {
        let startX = event.pageX;
        let startY = event.pageY;
        $('.exhi-content').children().css({
          'width': 200 + 'px',
          'height': 200 + 'px'
        });
        $('.exhi-content').children().children().css({
          'width': 40 + 'px',
          'height': 40 + 'px'
        });
        $('.exhi-content').children().css({
          'left': (startX - exhibitionLeft - centerX + originX) + 'px',
          'top': (startY - exhibitionTop - centerY + originY) + 'px'
        });
        event.stopPropagation();
        function moveFn (event) {
          let nowX = event.pageX;
          let nowY = event.pageY;
          $('.exhi-content').children().css({
            'left': (nowX - centerX - exhibitionLeft + originX) + 'px',
            'top': (nowY - centerY - exhibitionTop + originY) + 'px'
          });
          //防止移动卡顿
          event.preventDefault();
        }
        //添加移动方法
        $(document).on('mousemove', moveFn);
        $(document).mouseup(function (event) {
          let boxLeftX = $('.box').offset().left;
          let boxRightX = boxLeftX + boxLength;
          let boxTopY = $('.box').offset().top;
          let boxLowY = boxTopY + boxLength;
          let nowX = event.pageX;
          let nowY = event.pageY;
          let minLeft = boxLeftX + leftNum[choose] * gridLength;
          let maxRight = boxRightX - rightNum[choose] * gridLength;
          let minTop = boxTopY + upperNum[choose] * gridLength;
          let maxLow = boxLowY - lowerNum[choose] * gridLength;
          let numX = Math.floor((nowX - boxLeftX) / gridLength);
          let numY = Math.floor((nowY - boxTopY) / gridLength);
          let piecesInBoxX = numX + 1;
          let piecesInBoxY = numY + 1;

          // console.log('聚焦的棋子' + choose);
          //                console.log('numX = ' + numX);
          //                console.log('numY = ' + numY);
          //                console.log('piecesInBoxX = ' + piecesInBoxX);
          //                console.log('piecesInBoxY = ' + piecesInBoxY);
          if (nowX > minLeft && nowX < maxRight && nowY > minTop && nowY < maxLow) {
            //console.log('下棋了');
            $('.exhi-content').children().animate({
              'left': (boxLeftX + numX * gridLength - gridLength * 2 - exhibitionLeft) + 'px',
              'top': (boxTopY + numY * gridLength - gridLength * 2 - exhibitionTop) + 'px'
            }, 500);
            $('#button4').off("click").click(function () {
              //音效
              // var audio =$('#bm') ;//jQuery对象
              // var au=audio.get(0); //DOM对象
              // au.play();

              if (first === true) {
                for (let j = piecesInBoxY - upperNum[choose]; j <= piecesInBoxY + lowerNum[choose]; j++) {
                  for (let k = piecesInBoxX - leftNum[choose]; k <= piecesInBoxX + rightNum[choose]; k++) {
                    if (con[choose][j - piecesInBoxY + 4][k - piecesInBoxX + 4] === piecesColor[piecesPlay] &&
                            boxIndex[j][k] === canPosition[piecesPlay]) {
                      first = false;
                    }
                  }
                }
                if (first === true) {
                  alert("第一步棋子只能放在左下角,或者您放的不合规则(第一步棋子必须覆盖左下角格子)");
                  changeSize();
                } else {

                  //电脑能下
                  if ( computerPlayChessSign ) {
                    lastx = piecesInBoxX; lasty = piecesInBoxY;
                    //console.log('确认咯:'+piecesInBoxX + piecesInBoxY)

                    placePieces(piecesInBoxX, piecesInBoxY);
                    //markPieces(piecesInBoxX, piecesInBoxY);

                    //电脑下
                    computerPlay(1);
                    computerPlay(2);
                    computerPlay(3);
                    updateComBoxIndex(0);
                  }
                }
              } else {
                //console.log('确认咯:'+piecesInBoxX + piecesInBoxY)

                if ( lastx == piecesInBoxX && lasty == piecesInBoxY ) { //第一步以后，没有选棋子，点了确认
                  alert('您还没放棋子呢！请在左边点击选择棋子!@_@')
                }
                else {
                  placePieces(piecesInBoxX, piecesInBoxY);

                  //电脑能下
                  if ( computerPlayChessSign ) {
                    lastx == piecesInBoxX ;lasty == piecesInBoxY;

                    //电脑下
                    updateComBoxIndex(1);
                    computerPlay(1);
                    computerPlay(2);
                    computerPlay(3);
                    updateComBoxIndex(0);
                  }
                }
              }
            });
          } else {
            //松开后重新放大并回到原处
            changeSize();
          }
          $(document).off('mousemove').off('mouseup');
          $('.exhi-content').children().off('mouseup');
        });
      })
    }

    //======================================================================================================================================================
    //电脑编号no下
    /*
    电脑下棋的思路：
    1.遍历20*20的棋盘，找到能下棋的位置，即g3,y3,b3的点，坐标(x,y)作为一个对象放入数组comCanLet
    2.对数组排序，排序规则 |x-y|小的排在前面
    3.对comCanLet遍历，
    -----3.1.选棋子进行尝试(所有方向)
    ----------3.1.2.选棋子的规则，按照格子数从多到少选择
    ----------3.1.3.格子数相同的棋子中随机六次选择，若没有找到合适的，从21编号递减寻找没有被使用的
    */

    //电脑棋子的参数
    //标记电脑棋子是否被使用
    let comUsed;

    //初始化三个电脑的棋子都没有被使用
    function initComputerUsed() {
      comUsed = new Array();
      for ( let i = 0; i <= 3; ++i ) {
        comUsed[i] = new Array();
        for ( let j = 0; j <= 21; ++j ) {
          comUsed[i][j] = false;
        }
      }
    }

    //电脑下棋
    function computerPlay(no) {
      updateComBoxIndex(no);  //更新棋盘，更新xxx2 xxx3的点

      let flag = false;
      let comCanLet = [];//电脑编号no能下的位置
      //找位置
      for ( let i = 1; i <= 20; ++i ) {
        for (let j = 1; j <= 20; ++j ) {
          if ( boxIndex[i][j] == canPosition[no]) {
            //console.log(i,j);
            comCanLet.push({x:i,y:j});
          }
        }
      }
      //排序
      comCanLet.sort(cmp);
      // console.log(comCanLet);

      let ComChoose;//电脑选择棋子的编号
      //按位置逐一枚举
      for ( let i = 0; i < comCanLet.length; ++i ) {
        let x = comCanLet[i].x, y = comCanLet[i].y; //获得下棋点(就是棋子合法情况下需要覆盖的点)
        //console.log('=============下棋点'+x+','+y);

        //=====================>>>>>>>>>>>>>>>>第一部分，首先随机六次选择棋子
        for ( let comi = 0; comi < 6; ++ comi ) {
          let DisCenterX = new Array();
          let DisCenterY = new Array();

          ComChoose = Math.floor(10 + Math.random() * (21 - 10 + 1));
          //console.log('电脑选择的棋子' + ComChoose);

          if ( comUsed[no][ComChoose] == true ) {
            continue;
          }

          switch(ComChoose) {
            case 10:
              DisCenterX[0] = 0;DisCenterY[0] = 0;
              DisCenterX[1] = 0;DisCenterY[1] = 1;
              DisCenterX[2] = 0;DisCenterY[2] = 2;
              DisCenterX[3] = 0;DisCenterY[3] = -1;
              DisCenterX[4] = 0; DisCenterY[4] = -2
              break;
            case 11:
              DisCenterX[0] = 0;DisCenterY[0] = 0;
              DisCenterX[1] = 0;DisCenterY[1] = 1;
              DisCenterX[2] = 0;DisCenterY[2] = 2;
              DisCenterX[3] = 0;DisCenterY[3] = -1;
              DisCenterX[4] = -1; DisCenterY[4] = -1;
              break;
            case 12:
              DisCenterX[0] = 0;DisCenterY[0] = 0;
              DisCenterX[1] = 0;DisCenterY[1] = 1;
              DisCenterX[2] = 0;DisCenterY[2] = 2;
              DisCenterX[3] = 0;DisCenterY[3] = -1;
              DisCenterX[4] = -1; DisCenterY[4] = 0;
              break;
            case 13:
              DisCenterX[0] = 0;DisCenterY[0] = 0;
              DisCenterX[1] = 0;DisCenterY[1] = 1;
              DisCenterX[2] = 1;DisCenterY[2] = 0;
              DisCenterX[3] = 0;DisCenterY[3] = -1;
              DisCenterX[4] = -1; DisCenterY[4] = 0;
              break;
            case 14:
              DisCenterX[0] = 0;DisCenterY[0] = 0;
              DisCenterX[1] = 0;DisCenterY[1] = 1;
              DisCenterX[2] = -1;DisCenterY[2] = 0;
              DisCenterX[3] = 0;DisCenterY[3] = -1;
              DisCenterX[4] = -1; DisCenterY[4] = -1;
              break;
            case 15:
              DisCenterX[0] = 0;DisCenterY[0] = 0;
              DisCenterX[1] = 0;DisCenterY[1] = 1;
              DisCenterX[2] = 0;DisCenterY[2] = -1;
              DisCenterX[3] = -1;DisCenterY[3] = -1;
              DisCenterX[4] = -1; DisCenterY[4] = 1;
              break;
            case 16:
              DisCenterX[0] = 0;DisCenterY[0] = 0;
              DisCenterX[1] = 0;DisCenterY[1] = 1;
              DisCenterX[2] = 0;DisCenterY[2] = -1;
              DisCenterX[3] = -1;DisCenterY[3] = 0;
              DisCenterX[4] = -2; DisCenterY[4] = 0;
              break;
            case 17:
              DisCenterX[0] = 0;DisCenterY[0] = 0;
              DisCenterX[1] = 0;DisCenterY[1] = 1;
              DisCenterX[2] = 0;DisCenterY[2] = -1;
              DisCenterX[3] = 1;DisCenterY[3] = 0;
              DisCenterX[4] = -1; DisCenterY[4] = -1;
              break;
            case 18:
              DisCenterX[0] = 0;DisCenterY[0] = 0;
              DisCenterX[1] = 0;DisCenterY[1] = 1;
              DisCenterX[2] = 0;DisCenterY[2] = -1;
              DisCenterX[3] = 1;DisCenterY[3] = 1;
              DisCenterX[4] = -1; DisCenterY[4] = -1;
              break;
            case 19:
              DisCenterX[0] = 0;DisCenterY[0] = 0;
              DisCenterX[1] = 1;DisCenterY[1] = 0;
              DisCenterX[2] = 0;DisCenterY[2] = -1;
              DisCenterX[3] = 1;DisCenterY[3] = 1;
              DisCenterX[4] = -1; DisCenterY[4] = -1;
              break;
            case 20:
              DisCenterX[0] = 0;DisCenterY[0] = 0;
              DisCenterX[1] = 0;DisCenterY[1] = 1;
              DisCenterX[2] = 0;DisCenterY[2] = 2;
              DisCenterX[3] = -1;DisCenterY[3] = 0;
              DisCenterX[4] = -1; DisCenterY[4] = -1;
              break;
            case 21:
              DisCenterX[0] = 0;DisCenterY[0] = 0;
              DisCenterX[1] = 0;DisCenterY[1] = 1;
              DisCenterX[2] = 0;DisCenterY[2] = 2;
              DisCenterX[3] = -1;DisCenterY[3] = 0;
              DisCenterX[4] = -2; DisCenterY[4] = 0;
              break;
          }
          //棋子中心点,从中心点扩展标记棋子
          for ( let qzx = x - 2; qzx <= x + 2; qzx++ ) {
            for ( let qzy = y - 2; qzy <= y + 2; qzy++ ) {
              //console.log('中心点'+qzx+' '+qzy);
              if ( qzx >= 1 && qzx <= 20 && qzy >= 1 && qzy <= 20 ) { //中心点合法

                //111111111原来棋子的方向顺时针旋转
                for ( let direct = 1; direct <= 8; ++direct ) {
                  if ( direct == 5 ) { //左右旋转尝试
                    let tempZ = new Array();
                    tempZ = DisCenterX;
                    DisCenterX = LeftAndRightX(DisCenterX,DisCenterY);
                    DisCenterY = LeftAndRightY(tempZ,DisCenterY);//旋转90度
                  }

                  let tempZ = new Array();
                  tempZ = DisCenterX;
                  DisCenterX = Xuan90X(DisCenterX,DisCenterY);
                  DisCenterY = Xuan90Y(tempZ,DisCenterY);//旋转90度

                  let flagGai = false;//是否覆盖选择的x,y点
                  let illegal = 0;//中心点扩展棋子违规的点的数量

                  let DCxi;
                  for ( DCXi = 0; DCXi < DisCenterX.length; ++DCXi ) {
                    let tempx = qzx + DisCenterX[DCXi];
                    let tempy = qzy + DisCenterY[DCXi];
                    //console.log(tempx + ' ' + tempy);
                    if ( tempx >= 1 && tempx <= 20 && tempy >= 1 && tempy <= 20 ) {
                      if ( tempx == x && tempy == y ) {
                        flagGai = true;
                      }
                      if ( boxIndex[tempx][tempy] == 0 || boxIndex[tempx][tempy] == canPosition[no]) {
                        if (
                                (tempy+1 > 20 ||(tempy + 1 <= 20 && (boxIndex[tempx][tempy+1] == 0 ||
                                        (boxIndex[tempx][tempy+1] != piecesColor[no]) ) ) )
                                &&
                                (tempy-1<1||( tempy - 1 >= 1 && (boxIndex[tempx][tempy-1] == 0 ||
                                        (boxIndex[tempx][tempy-1] != piecesColor[no]) )) )
                                &&
                                (tempx+1>20||( tempx + 1 <= 20 && (boxIndex[tempx+1][tempy] == 0 ||
                                        (boxIndex[tempx+1][tempy] != piecesColor[no]) )) )
                                &&
                                ( tempx-1 < 1||( tempx - 1 >= 1 && (boxIndex[tempx-1][tempy] == 0 ||
                                        (boxIndex[tempx-1][tempy] != piecesColor[no]) )) )
                        ) {
                          ;
                        }
                      }
                      else {
                        illegal++;
                      }
                    }
                    else {
                      illegal++;
                    }
                  }

                  //能放!!!!!!!!!!!!!!!
                  if ( flagGai && illegal == 0 ) {
                    for ( let DCXi = 0; DCXi < DisCenterX.length; ++DCXi ) {
                      let tempx = qzx + DisCenterX[DCXi];
                      let tempy = qzy + DisCenterY[DCXi];
                      boxIndex[tempx][tempy] = piecesColor[no];
                    }
                    //画上，直接退出
                    comUsed[no][ComChoose] = true;

                    drawChessBoard(boxIndex);
                    return true;
                  }
                }

                //222222222左右翻转后，再顺时针旋转尝试  TODO

              }
            }
          }
        }
        //<<<<<<<<<<<<<<<<<<<<<<<<=========================================

        //>>>>>>>>>>>>>>>>>>>>>>>>第二部分,如果随机方案不成功，从大到小遍历，谁合适就放谁
        if ( !flag ) {
          for ( ComChoose = 21; ComChoose >= 1; --ComChoose ) {
            //console.log('选择棋子'+ComChoose)
            let DisCenterX = new Array();
            let DisCenterY = new Array();
            if ( comUsed[no][ComChoose] == false ) {
              switch(ComChoose) {
                case 1:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  break;
                case 2:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  break;
                case 3:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  DisCenterX[2] = 0;DisCenterY[2] = -1;
                  break;
                case 4:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  DisCenterX[2] = -1;DisCenterY[2] = 0;
                  break;
                case 5:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  DisCenterX[2] = 0;DisCenterY[2] = 2;
                  DisCenterX[3] = 0;DisCenterY[3] = -1;
                  break;
                case 6:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  DisCenterX[2] = 0;DisCenterY[2] = -1;
                  DisCenterX[3] = -1;DisCenterY[3] = -1;
                  break;
                case 7:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  DisCenterX[2] = 0;DisCenterY[2] = -1;
                  DisCenterX[3] = -1;DisCenterY[3] = 0;
                  break;
                case 8:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = -1;DisCenterY[1] = -1;
                  DisCenterX[2] = 0;DisCenterY[2] = -1;
                  DisCenterX[3] = -1;DisCenterY[3] = 0;
                  break;
                case 9:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  DisCenterX[2] = -1;DisCenterY[2] = 0;
                  DisCenterX[3] = -1;DisCenterY[3] = -1;
                  break;
                case 10:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  DisCenterX[2] = 0;DisCenterY[2] = 2;
                  DisCenterX[3] = 0;DisCenterY[3] = -1;
                  DisCenterX[4] = 0; DisCenterY[4] = -2
                  break;
                case 11:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  DisCenterX[2] = 0;DisCenterY[2] = 2;
                  DisCenterX[3] = 0;DisCenterY[3] = -1;
                  DisCenterX[4] = -1; DisCenterY[4] = -1;
                  break;
                case 12:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  DisCenterX[2] = 0;DisCenterY[2] = 2;
                  DisCenterX[3] = 0;DisCenterY[3] = -1;
                  DisCenterX[4] = -1; DisCenterY[4] = 0;
                  break;
                case 13:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  DisCenterX[2] = 1;DisCenterY[2] = 0;
                  DisCenterX[3] = 0;DisCenterY[3] = -1;
                  DisCenterX[4] = -1; DisCenterY[4] = 0;
                  break;
                case 14:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  DisCenterX[2] = -1;DisCenterY[2] = 0;
                  DisCenterX[3] = 0;DisCenterY[3] = -1;
                  DisCenterX[4] = -1; DisCenterY[4] = -1;
                  break;
                case 15:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  DisCenterX[2] = 0;DisCenterY[2] = -1;
                  DisCenterX[3] = -1;DisCenterY[3] = -1;
                  DisCenterX[4] = -1; DisCenterY[4] = 1;
                  break;
                case 16:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  DisCenterX[2] = 0;DisCenterY[2] = -1;
                  DisCenterX[3] = -1;DisCenterY[3] = 0;
                  DisCenterX[4] = -2; DisCenterY[4] = 0;
                  break;
                case 17:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  DisCenterX[2] = 0;DisCenterY[2] = -1;
                  DisCenterX[3] = 1;DisCenterY[3] = 0;
                  DisCenterX[4] = -1; DisCenterY[4] = -1;
                  break;
                case 18:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  DisCenterX[2] = 0;DisCenterY[2] = -1;
                  DisCenterX[3] = 1;DisCenterY[3] = 1;
                  DisCenterX[4] = -1; DisCenterY[4] = -1;
                  break;
                case 19:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 1;DisCenterY[1] = 0;
                  DisCenterX[2] = 0;DisCenterY[2] = -1;
                  DisCenterX[3] = 1;DisCenterY[3] = 1;
                  DisCenterX[4] = -1; DisCenterY[4] = -1;
                  break;
                case 20:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  DisCenterX[2] = 0;DisCenterY[2] = 2;
                  DisCenterX[3] = -1;DisCenterY[3] = 0;
                  DisCenterX[4] = -1; DisCenterY[4] = -1;
                  break;
                case 21:
                  DisCenterX[0] = 0;DisCenterY[0] = 0;
                  DisCenterX[1] = 0;DisCenterY[1] = 1;
                  DisCenterX[2] = 0;DisCenterY[2] = 2;
                  DisCenterX[3] = -1;DisCenterY[3] = 0;
                  DisCenterX[4] = -2; DisCenterY[4] = 0;
                  break;
              }

              //棋子中心点,从中心点扩展标记棋子
              for ( let qzx = x - 2; qzx <= x + 2; qzx++ ) {
                for ( let qzy = y - 2; qzy <= y + 2; qzy++ ) {
                  //console.log('中心点'+qzx+' '+qzy);
                  if ( qzx >= 1 && qzx <= 20 && qzy >= 1 && qzy <= 20 ) { //中心点合法
                    //1111111111原来棋子的方向顺时针旋转
                    for ( let direct = 1; direct <= 4; ++direct ) {
                      let tempZ = new Array();
                      tempZ = DisCenterX;
                      DisCenterX = Xuan90X(DisCenterX,DisCenterY);
                      DisCenterY = Xuan90Y(tempZ,DisCenterY);//旋转90度

                      let flagGai = false;//是否覆盖选择的x,y点
                      let illegal = 0;//中心点扩展棋子违规的点的数量

                      let DCxi;
                      for ( DCXi = 0; DCXi < DisCenterX.length; ++DCXi ) {
                        let tempx = qzx + DisCenterX[DCXi];
                        let tempy = qzy + DisCenterY[DCXi];
                        //console.log(tempx + ' ' + tempy);
                        if ( tempx >= 1 && tempx <= 20 && tempy >= 1 && tempy <= 20 ) {
                          if ( tempx == x && tempy == y ) {
                            flagGai = true;
                          }
                          if ( boxIndex[tempx][tempy] == 0 || boxIndex[tempx][tempy] == canPosition[no]) {
                            if (
                                    (tempy+1 > 20 ||(tempy + 1 <= 20 && (boxIndex[tempx][tempy+1] == 0 ||
                                            (boxIndex[tempx][tempy+1] != piecesColor[no]) ) ) )
                                    &&
                                    (tempy-1<1||( tempy - 1 >= 1 && (boxIndex[tempx][tempy-1] == 0 ||
                                            (boxIndex[tempx][tempy-1] != piecesColor[no]) )) )
                                    &&
                                    (tempx+1>20||( tempx + 1 <= 20 && (boxIndex[tempx+1][tempy] == 0 ||
                                            (boxIndex[tempx+1][tempy] != piecesColor[no]) )) )
                                    &&
                                    ( tempx-1 < 1||( tempx - 1 >= 1 && (boxIndex[tempx-1][tempy] == 0 ||
                                            (boxIndex[tempx-1][tempy] != piecesColor[no]) )) )
                            ) {
                              ;
                            }
                          }
                          else {
                            illegal++;
                          }
                        }
                        else {
                          illegal++;
                        }
                      }

                      //能放!!!!!!!!!!!!!!!
                      if ( flagGai && illegal == 0 ) {
                        for ( let DCXi = 0; DCXi < DisCenterX.length; ++DCXi ) {
                          let tempx = qzx + DisCenterX[DCXi];
                          let tempy = qzy + DisCenterY[DCXi];
                          boxIndex[tempx][tempy] = piecesColor[no];
                        }
                        //画上，直接退出
                        comUsed[no][ComChoose] = true;

                        drawChessBoard(boxIndex);
                        return true;
                      }

                    }

                    //222222222左右翻转后，再顺时针旋转尝试  TODO

                  }
                }
              }
            }
          }
        }
        //<<=<<<<<<<<<<<<<<<<<==========
      }

    }
    // //首先随机选择
    // function randomSelect() {

    // }

    //得到DisX，DisY数组
    // function getDisXAndDisY(){

    // }
    //判断是否能下
    // function judgeChess() {

    // }

    //轮到某人时，更新可以下棋的点boxIndex数组
    function updateComBoxIndex(no) {
      for ( let i = 1; i <= 20; ++i ) {
        for ( let j = 1; j <= 20; ++j ) {
          if ( boxIndex[i][j] == piecesColor[no] ) {
            //斜对角方向
            if ( i-1 >= 1 && i-1 <= 20 && j-1 >= 1 && j-1 <= 20 ) {
              if ( boxIndex[i-1][j-1] == 0 ) { boxIndex[i-1][j-1] = canPosition[no]}
            }
            if ( i-1 >= 1 && i-1 <= 20 && j+1 >= 1 && j+1 <= 20 ) {
              if ( boxIndex[i-1][j+1] == 0 ) { boxIndex[i-1][j+1] = canPosition[no]}
            }
            if ( i+1 >= 1 && i+1 <= 20 && j-1 >= 1 && j-1 <= 20 ) {
              if ( boxIndex[i+1][j-1] == 0 ) { boxIndex[i+1][j-1] = canPosition[no]}
            }
            if ( i+1 >= 1 && i+1 <= 20 && j+1 >= 1 && j+1 <= 20 ) {
              if ( boxIndex[i+1][j+1] == 0 ) { boxIndex[i+1][j+1] = canPosition[no]}
            }
          }
        }
      }

      for ( let i = 1; i <= 20; ++i ) {
        for ( let j = 1; j <= 20; ++j ) {
          if ( boxIndex[i][j] == piecesColor[no] ) {
            //竖直四个方向
            if ( i+1 >= 1 && i+1 <= 20 ) {
              if ( boxIndex[i+1][j] == 0 || boxIndex[i+1][j] == canPosition[no] ) { boxIndex[i+1][j] = notPosition[no]}
            }
            if ( i-1 >= 1 && i-1 <= 20 ) {
              if ( boxIndex[i-1][j] == 0 || boxIndex[i-1][j] == canPosition[no] ) { boxIndex[i-1][j] = notPosition[no]}
            }
            if ( j-1 >= 1 && j-1 <= 20 ) {
              if ( boxIndex[i][j-1] == 0 || boxIndex[i][j-1] == canPosition[no] ) { boxIndex[i][j-1] = notPosition[no]}
            }
            if ( j+1 >= 1 && j+1 <= 20 ) {
              if ( boxIndex[i][j+1] == 0 || boxIndex[i][j+1] == canPosition[no] ) { boxIndex[i][j+1] = notPosition[no]}
            }
          }
        }
      }
    }

    //顺时针旋转90度    X,Y
    function Xuan90X(x, y ) {
      let tempX = new Array();
      for ( let i = 0; i < x.length; ++i ) {
        tempX[i] = y[i];
      }
      return tempX;
    }
    function Xuan90Y(x, y) {
      let tempY = new Array();
      for ( let i = 0; i < x.length; ++i ) {
        if ( x[i] == 0 ) {
          tempY[i] = x[i];
        }
        else if ( y[i] == 0 ) {
          tempY[i] = -x[i];
        }
        else {
          tempY[i] = -x[i];
        }
      }
      return tempY;
    }

    //左右旋转
    function LeftAndRightX(x, y) {
      let tempX = new Array();
      for ( let i = 0; i < x.length; ++i ) {
        tempX[i] = x[i];
      }
      return tempX;
    }
    function LeftAndRightY(x,y){
      let tempY = new Array();
      for ( let i = 0; i < x.length; ++i ) {
        if ( y[i] == 0 ) tempY[i] = y[i];
        else tempY[i] = -y[i];
      }
      return tempY;
    }

    //排序比较规则
    function cmp(a, b) {
      if ( Math.abs(a.x - a.y) > Math.abs(b.x - b.y) ) {
        return 1;
      }
      else if ( Math.abs(a.x - a.y) > Math.abs(b.x - b.y) ) {
        return -1;
      }
      else return 0;
    }

    //========================================================================================================================================== 电脑结束!!!!!!!!!!!!!!


    //松开后重新放大并回到原处
    function changeSize() {
      $('.exhi-content').children().css({
        'width': 300 + 'px',
        'height': 300 + 'px',
      });
      $('.exhi-content').children().children().css({
        'width': 60 + 'px',
        'height': 60 + 'px'
      });
      $('.exhi-content').children().animate({
        'left': 50 + 'px',
        'top': 50 + 'px'
      }, 1000);
    }

    //判断棋子是否可以放置在该位置
    function placePieces(piecesInBoxX, piecesInBoxY) {
      computerPlayChessSign = true;

      let confirm = true;
      let isAdjacent = false;
      let isOverlap = false;
      let piecesLeft = 4 - leftNum[choose];
      let piecesRight = 4 + rightNum[choose];
      let piecesUpper = 4 - upperNum[choose];
      let piecesLower = 4 + lowerNum[choose];

      // Role: 判断所放置的棋子是否与之前下的棋子粘合（不在空白处）  默认未粘合
      for (let j = piecesUpper; j <= piecesLower && isAdjacent === false; j++) {
        for (let k = piecesLeft; k <= piecesRight && isAdjacent === false; k++) {
          if (con[choose][j][k] === piecesColor[piecesPlay] &&
                  boxIndex[j - 4 + piecesInBoxY][k - 4 + piecesInBoxX] !== '0'){
            isAdjacent = true;
          }
        }
      }

      // Role: 判断所放置的棋子是否与棋盘中其他棋子重合  默认未重合
      for (let j = piecesUpper; j <= piecesLower && isOverlap === false; j++) {
        for (let k = piecesLeft; k <= piecesRight && isOverlap === false; k++) {
          let x = k - 4 + piecesInBoxX;
          let y = j - 4 + piecesInBoxY;
          if (con[choose][j][k] === piecesColor[piecesPlay] &&
                  (boxIndex[y][x] === piecesColor[piecesPlay]
                          || boxIndex[y][x] === piecesColor[otherFirstPlayer]
                          || boxIndex[y][x] === piecesColor[otherSecondPlayer]
                          || boxIndex[y][x] === piecesColor[otherThirdPlayer])){
            isOverlap = true;
          }
        }
      }

      if (isAdjacent === true && isOverlap === false){
        // Role: 判断棋子是否下在不可下的位置  默认可以下
        for (let j = piecesUpper; j <= piecesLower && confirm === true; j++) {
          for (let k = piecesLeft; k <= piecesRight && confirm === true; k++) {
            if (con[choose][j][k] === piecesColor[piecesPlay]){
              // boxIndex[j - 4 + piecesInBoxY][k - 4 + piecesInBoxX] === notPosition[piecesPlay]
              let array = boxIndex[j - 4 + piecesInBoxY][k - 4 + piecesInBoxX].toString().split("/");
              for (let l = 0; l < array.length; l++) {
                if (array[l] === notPosition[piecesPlay]) {
                  confirm = false;
                }
              }
            }
          }
        }
        if (confirm === true){
          // Role: 防止不在可下位置的其他位置放置
          for (let j = piecesUpper; j <= piecesLower && confirm === true; j++) {
            for (let k = piecesLeft; k <= piecesRight && confirm === true; k++) {
              if (con[choose][j][k] === piecesColor[piecesPlay]){
                // boxIndex[j - 4 + piecesInBoxY][k - 4 + piecesInBoxX] === canPosition[piecesPlay]
                //let array = boxIndex[j - 4 + piecesInBoxY][k - 4 + piecesInBoxX].split("/");
                let array = boxIndex[j - 4 + piecesInBoxY][k - 4 + piecesInBoxX].toString().split("/");
                for (let l = 0; l < array.length; l++) {
                  if (array[l] === canPosition[piecesPlay]) {
                    confirm = false;
                    markPieces(piecesInBoxX, piecesInBoxY);
                  }
                }
              }
            }
          }
          if (confirm === true) {
            alert("该位置不能放置棋子");
            computerPlayChessSign = false;
            changeSize();
          }
        }else{
          alert("该位置不能放置棋子");
          computerPlayChessSign = false;
          changeSize();
        }
      }else{
        alert("该位置不能放置棋子");
        computerPlayChessSign = false;
        changeSize();
      }
    }

    //对棋子在棋盘进行标记操作
    function markPieces(piecesInBoxX, piecesInBoxY) {
      let scanLeft = 4 - leftNum[choose] - 1;
      let scanRight = 4 + rightNum[choose] + 1;
      let scanUpper = 4 - upperNum[choose] - 1;
      let scanLower = 4 + lowerNum[choose] + 1;
      let scanBoxLeft = piecesInBoxX - leftNum[choose] - 1;
      let scanBoxRight = piecesInBoxX + rightNum[choose] + 1;
      let scanBoxUpper = piecesInBoxY - upperNum[choose] - 1;
      let scanBoxLower = piecesInBoxY + lowerNum[choose] + 1;
      for (let j = scanUpper, m = scanBoxUpper; j <= scanLower; j++, m++) {
        for (let k = scanLeft, n = scanBoxLeft; k <= scanRight; k++, n++) {
          if (m >= 1 && m <= 20 && n >= 1 && n <= 20) {
            // Role: (if作用)具有颜色的格子不进行渲染
            if (boxIndex[m][n] !== piecesColor[piecesPlay]
                    && boxIndex[m][n] !== piecesColor[otherFirstPlayer]
                    && boxIndex[m][n] !== piecesColor[otherSecondPlayer]
                    && boxIndex[m][n] !== piecesColor[otherThirdPlayer]) {

              if (con[choose][j][k] === canPosition[piecesPlay]) {
                if (boxIndex[m][n] === '0') {
                  boxIndex[m][n] = canPosition[piecesPlay];
                } else {
                  boxIndex[m][n] += "/" + canPosition[piecesPlay];
                }
              } else if (con[choose][j][k] === notPosition[piecesPlay]) {
                if (boxIndex[m][n] === '0') {
                  boxIndex[m][n] = notPosition[piecesPlay];
                } else {
                  boxIndex[m][n] += "/" + notPosition[piecesPlay];
                }
              } else if (con[choose][j][k] === piecesColor[piecesPlay]) {
                boxIndex[m][n] = piecesColor[piecesPlay];
              }

            }
          }
        }
      }
      $('.exhi-content').children().remove();
      determine[choose] = true;
      //向后端传递数组
      // send();
      // console.log(boxIndex);
      drawChessBoard(boxIndex);
    }

    // 渲染棋盘
    function drawChessBoard(boxIndex) {
      for (let i = 1; i <= 20; ++i) {
        for (let j = 1; j <= 20; ++j) {
          let k = (i - 1) * 20 + j;

          if (boxIndex[i][j] === 'r1') {
            $('.grid' + k).css('background-color', 'red');
          }
          if (boxIndex[i][j] === 'y1') {
            $('.grid' + k).css('background-color', 'yellow');
          }
          if (boxIndex[i][j] === 'b1') {
            $('.grid' + k).css('background-color', 'blue');
          }
          if (boxIndex[i][j] === 'g1') {
            $('.grid' + k).css('background-color', 'green');
          }

          if(boxIndex[i][j] != 'r1' && boxIndex[i][j] != 'y1' && boxIndex[i][j] != 'b1' && boxIndex[i][j] != 'g1')
            $('.grid' + k).css('background-color', '');

        }
      }
    }

  </script>

</head>
<body>
<div class="candidate" id="chplace">
  <div class="chess-place"></div>
  <div style="position: absolute; left: 160px; bottom: -55px">
    <button type="button" class="btn btn-primary btn-lg" id="button5" >永久跳过</button>
  </div>
</div>

<div class="box">
  <div class="chess-board"></div>
  <div class="chess-confirm">
    <button type="button" class="btn btn-primary btn-lg" id="button4">确定</button>
  </div>
</div>

<div class="exhibition" id="mychange">
  <div class="exhi-content"></div>
  <div class="exhi-operate">
    <button type="button" class="btn btn-primary btn-lg" id="button1">左右翻转</button>
    <button type="button" class="btn btn-primary btn-lg" id="button2">旋转</button>
    <button type="button" class="btn btn-primary btn-lg" id="button3">上下翻转</button>
  </div>
</div>
<div style="position: absolute; right: 200px; bottom: 150px; display: none" id="rebutton">
  <button type="button" class="btn btn-primary btn-lg" id="button6" >上一步</button>
  <button type="button" class="btn btn-primary btn-lg" id="button7" >下一步</button>
</div>
</body>
</html>
